import React, { useEffect, useState, useCallback } from 'react';
import { connect } from 'dva';
import TableSelector from './components/TableSelector';
import style from '@/pages/IndexPage.css';
import MultiBarChart from './components/MultiBarChart';
import RankBarChart from './components/RankBarChart';
import PieChart from './components/PieChart';

function AlarmTrend({ dispatch }){
    const handleSearch = useCallback((obj) => {
        
    }, []);
    return (
        <div className={style['page-container']}>
            <div style={{ height:'90px' }}>
                <TableSelector onSearch={handleSearch}  />
            </div>
            <div style={{ height:'calc( 100% - 90px)', paddingTop:'1rem' }}>
                <div style={{ height:'50%' }}>
                    <div className={style['card-container-wrapper']} style={{ width:'50%' }}>
                        <div className={style['card-container']}>
                            <div className={style['card-title']}>告警占比</div>
                            <div className={style['card-content']}>
                                <div style={{ display:'inline-block', width:'50%', height:'100%' }}>
                                    <PieChart data={{ '通讯告警':2 , '温度越限':10 }} />
                                </div>
                                <div style={{ display:'inline-block', width:'50%', height:'100%' }}>
                                    <PieChart data={{ '已处理':2 , '未处理':5, '挂起':8 }} />
                                </div>
                            </div>
                        </div>
                        
                    </div>   
                    <div className={style['card-container-wrapper']} style={{ width:'50%' }}>
                        <div className={style['card-container']}>
                            <div className={style['card-title']}>告警排名</div>
                            <div className={style['card-content']}>
                                <RankBarChart />
                            </div>
                        </div>
                        
                    </div> 
                     
                </div>  
                <div style={{ height:'50%' }}>
                    <div className={style['card-container']}>
                        <div className={style['card-title']}>告警趋势</div>
                        <div className={style['card-content']}>
                            <MultiBarChart />
                        </div>
                    </div>
                </div>       
            </div>
        </div>
    )
}

export default connect()(AlarmTrend);